
<%var csstpl = {%>
<style>
.p-20{
    padding: 20px;
    }

</style>

<%};%>
<%var jstpl = {%>
<script src="${basepath}/vendor/js/plugins/echarts/echarts.common.min.js"></script>
<script type="text/javascript">
var app = new Vue({
	el: ".wrapper-content",
	data: {
		yesterdayData: {},
		yesterdayMoney:'',
		todayData: {},
		todayMoney:'',
		yesterdayUv:'',
		yesterdayPv:'',
		todayUv:'',
		todayPv:'',
		yesterdayPayOrder:'',
		yesterdayPayPeople:'',
		todayPayOrder:'',
		todayPayPeople:''
	},
	created: function() {
		this.loadData();
	},
	methods: {
		loadData: function() { 
			Ajax("/shangjia/product/data/getDataProfile", function(d) {
				app.yesterdayData=d.yesterdayData;
				app.yesterdayMoney=d.yesterdayMoney;
				app.todayData=d.todayData;
				app.todayMoney=d.todayMoney;
				app.yesterdayUv=d.yesterdayUv;
				app.yesterdayPv=d.yesterdayPv;
				app.todayUv=d.todayUv;
				app.todayPv=d.todayPv;
				app.yesterdayPayOrder=d.yesterdayPayOrder;
				app.yesterdayPayPeople=d.yesterdayPayPeople;
				app.todayPayOrder=d.todayPayOrder;
				app.todayPayPeople=d.todayPayPeople;
				
				 //初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main'));
		        window.onresize = function(){
		            myChart.resize();
		        }
		        option = {
		        	    tooltip : {
		        	        trigger: 'axis',
		        	        formatter:function(params){
		        	        	var time = "";
		        	        	var html = "";
		        	        	for(var i=0;i<params.length;i++)
		        	        	{
		        	        		time = params[i].axisValue;
		        	        		html += params[i].marker;
		        	        		html += params[i].seriesName+":"+params[i].value;
		        	        		html += i==params.length-1?"":"<br>";
		        	        	}
		        	        	
		        	        	html = "00:00 - "+(time<10?"0":"")+time+":59<br>"+html;
		    	                return html;
		        	        },
		        	        axisPointer: {
		        	            type: 'cross',
		        	            label: {
		        	                backgroundColor: '#6a7985'
		        	            }
		        	        }
		        	    },
		        	    toolbox:{
		        	    	 feature: {
		        	             myTool1: {
		        	                 show: true,
		        	                 title: '刷新',
		        	      			 icon:'<path d="M512 0C229.230208 0 0 229.230208 0 512 0 794.769792 229.230208 1024 512 1024 761.325865 1024 973.201958 844.559514 1016.153097 601.764678 1018.151127 590.470182 1019.771663 579.089182 1021.010022 567.635639 1022.492753 553.921916 1012.577574 541.602754 998.863851 540.120021 985.150125 538.637291 972.830963 548.552469 971.348233 562.266193 970.230573 572.603369 968.768273 582.873092 966.965602 593.063262 928.217702 812.097967 736.992706 974.048781 512 974.048781 256.817504 974.048781 49.951219 767.182496 49.951219 512 49.951219 256.817504 256.817504 49.951219 512 49.951219 698.044361 49.951219 863.703281 160.916567 936.293348 328.7543 941.768939 341.414579 956.470965 347.238921 969.131243 341.763332 981.791522 336.287742 987.615863 321.585717 982.140273 308.925438 901.710383 122.961007 718.143277 0 512 0Z"></path><path d="M958.442797 350.246554 983.418406 325.270944 724.292683 325.270944C710.499034 325.270944 699.317073 336.452907 699.317073 350.246554 699.317073 364.040203 710.499034 375.222163 724.292683 375.222163L983.418406 375.222163C997.212055 375.222163 1008.394016 364.040203 1008.394016 350.246554L1008.394016 74.926829C1008.394016 61.133181 997.212055 49.951219 983.418406 49.951219 969.624757 49.951219 958.442797 61.133181 958.442797 74.926829L958.442797 350.246554Z',
		        	                 onclick: function (){
										app.loadData();
		        	                 }
		        	             }
		        	         }
		        	    },
		        	    grid: {
		        	        left: '3%',
		        	        right: '4%',
		        	        bottom: '3%',
		        	        containLabel: true
		        	    },
		        	    xAxis : [
		        	        {
		        	            type : 'category',
		        	            axisTick:{show:false},
		        	            boundaryGap : false,
		        	            data : ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
		        	        }
		        	    ],
		        	    yAxis : [
		        	        {
		        	            type : 'value',
		        	            show:true,
		        	            axisTick:{show:false},
		        	            splitLine:{show:false},
		        	            axisLine:{
		        	            	show:false
		        	            }
		        	        }
		        	    ],
		        	    series : [
		        	        {
		        	            name:'昨日',
		        	            type:'line',
		        	            stack: '总量',
		        	            areaStyle: {},
		        	            data:app.yesterdayData
		        	        },
		        	        {
		        	            name:'今日',
		        	            type:'line',
		        	            stack: '总量',
		        	            areaStyle: {},
		        	            data:app.todayData
		        	        }
		        	    ]
		        	};

		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
			})
		}
	}
})

       
    </script>
<%};%>
<%layout("../layout/_layout.html",{title:'小金娱',jstpl:jstpl,csstpl:csstpl}){ %>
	<div class="wrapper wrapper-content animated fadeInUp">
		<div class="row">
                    <div class="col-lg-8">
                        <div class="ibox float-e-margins">
                            <div class="ibox-content">
                                <div>
                                	<h5>付款金额</h5>
                                    <h2>{{todayMoney}}</h2>
                                    <small class="stats-label">昨日全天:{{yesterdayMoney}}</small>
                                </div>

                                <div class="m-t-sm">
                                    <div class="row">
                                        <div class="col-md-12">
                                           <div id="main" style="height:250px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="ibox float-e-margins">
                            <div class="ibox-content">
                                <div class="row">
                                    <div class="col-xs-6 p-20">
                                    	<h5>访客数</h5>
                                    	<h2>{{todayUv}}</h2>
                                        <small class="stats-label">昨日全天:{{yesterdayUv}}</small>
                                    </div>

                                    <div class="col-xs-6 p-20">
                                   		<h5>浏览量</h5>
                                    	<h2>{{todayPv}}</h2>
                                        <small class="stats-label">昨日全天:{{yesterdayPv}}</small>
                                    </div>
                                    <div class="col-xs-6 p-20">
                                        <h5>付款订单数</h5>
                                    	<h2>{{todayPayOrder}}</h2>
                                        <small class="stats-label">昨日全天:{{yesterdayPayOrder}}</small>
                                    </div>
                                    <div class="col-xs-6 p-20">
                                    	<h5>付款人数</h5>
                                    	<h2>{{todayPayPeople}}</h2>
                                        <small class="stats-label">昨日全天:{{yesterdayPayPeople}}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
 	</div>
<%}%>
